<template>
  <div class="public_main">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <template v-if="from=='merchant'">
					<el-breadcrumb-item>{{$t('dashBoard.no2')}}</el-breadcrumb-item>
					<el-breadcrumb-item>{{$t('dashBoard.no3')}}</el-breadcrumb-item>
					<el-breadcrumb-item >{{$t('merchantList.no66')}}</el-breadcrumb-item>
				</template>
				<template v-else-if="from=='onemerchant'">
					<el-breadcrumb-item>{{$t('sidebar.operator')}}</el-breadcrumb-item>
					<el-breadcrumb-item>{{$t('sidebar.processConfig')}}</el-breadcrumb-item>
					<el-breadcrumb-item>{{$t('sidebar.processConfig')}}</el-breadcrumb-item>
				</template>
				<template v-else>
					<el-breadcrumb-item>{{$t('dashBoard.no19')}}</el-breadcrumb-item>
          <el-breadcrumb-item>{{$t('dashBoard.no9')}}</el-breadcrumb-item>
          <el-breadcrumb-item>{{$t('dashBoard.no11')}}</el-breadcrumb-item>
				</template>
        <el-breadcrumb-item>{{$t('noteConfig.no3')}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 添加流程 -->
		<div class="oneLineHasOne">
			<p >
				<span>{{$t('merchantList.no8')}}:</span>
				<span>{{partnerNo}}</span>
			</p>
		</div> 
		<div class="oneLineHasOne ">
			<p >
				<span>{{$t('merchantList.no1')}}:</span>
				<span>{{partnerName}}</span>
			</p>
		</div> 
		<p class="mb30"></p>

    <!-- 流程节点短信配置 -->
    <h3 class="mb20 blue" >{{$t('noteConfig.no8')}}</h3>
    <el-button type="primary" size="small" @click="showAdd(1)">{{$t('noteConfig.no10')}}</el-button>
    <el-table :data="processNodeSmsConfigList"  size="small" class="mb30">
      <el-table-column align="center" prop="id" label="ID"></el-table-column>
      <el-table-column align="center" prop="smsContent" :label="$t('loanAfterOperation.content')"></el-table-column>
      <el-table-column align="center" prop="addTime" :label="$t('public.no21')"></el-table-column>
      <el-table-column align="center" prop="sendChannel" :label="$t('noteConfig.no11')"></el-table-column>
      <el-table-column align="center" prop="channelType" :label="$t('noteConfig.no12')"></el-table-column>
      <el-table-column fixed="right" align="center" prop="operation" :label="$t('public.operation')" min-width="180">
        <template slot-scope="scope" >
          <span class="table_opr" @click="changeNote(1,scope.row)">{{$t('noteConfig.no7')}}</span>
          <span class="table_opr" @click="deleteNote(1,scope.row.id)">{{$t('idManage.del')}}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="end">
      <div class="pages" >
        <el-pagination
          @current-change="handleCurrentChange1"
          :current-page="pagination.processcurrent"
          layout="prev, pager, next, total,->"
          :page-sizes="pagination.pageSizeOptions"
          :page-size="pagination.pageSize"
          @size-change="handleSizeChange"
          :total="pagination.processtotal">
        </el-pagination>
      </div>
    </el-row>


    <!-- 还款提醒短信配置 -->
    <h3 class="mb20 blue" >{{$t('noteConfig.no9')}}</h3>
    <el-button type="primary" size="small" @click="showAdd(2)">{{$t('noteConfig.no10')}}</el-button>
    <el-table :data="repaySmsConfigList"  size="small" >
      <el-table-column align="center" prop="id" label="ID"></el-table-column>
      <el-table-column align="center" prop="collectionStage" :label="$t('noteConfig.no19')"></el-table-column>
      <el-table-column align="center" prop="loanTerm" :label="$t('public.no25')"></el-table-column>
      <el-table-column align="center" prop="smsContent" :label="$t('loanAfterOperation.content')"></el-table-column>
      <el-table-column align="center" prop="sendTime" :label="$t('operatorManage.no5')"></el-table-column>
      <el-table-column align="center" prop="sendTarget" :label="$t('operatorManage.no18')"></el-table-column>
      <el-table-column align="center" prop="sendChannel" :label="$t('noteConfig.no11')"></el-table-column>
      <el-table-column align="center" prop="channelType" :label="$t('noteConfig.no12')"></el-table-column>
      <el-table-column fixed="right" align="center" prop="operation" :label="$t('public.operation')" min-width="180">
        <template slot-scope="scope" >
          <span class="table_opr" @click="changeNote(2,scope.row)">{{$t('noteConfig.no7')}}</span>
          <span class="table_opr" @click="deleteNote(2,scope.row.id)">{{$t('idManage.del')}}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="end">
      <div class="pages" >
        <el-pagination
          @current-change="handleCurrentChange2"
          :current-page="pagination.repaycurrent"
          layout="prev, pager, next, total,->"
          :page-sizes="pagination.pageSizeOptions"
          :page-size="pagination.pageSize"
          @size-change="handleSizeChange"
          :total="pagination.repaytotal">
        </el-pagination>
      </div>
    </el-row>

    <!-- ------------------ 短信验证码渠道__添加短信 -------------------- -->
    <el-dialog :title="$t('noteConfig.no22')" :visible.sync="addFlag1" width="1100px">
      <el-form :model="form1" size="small"  ref="ruleForm" label-width="120px">
        <div class="flex">
          <el-form-item :label="$t('noteConfig.no18')" prop="messageType">
            <el-select size="small" v-model="form1.sendNode">
              <el-option v-for="item in sendnodeOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('noteConfig.no12')" prop="messageType">
            <el-select size="small" v-model="form1.channelType">
              <el-option v-for="item in channelTypeOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('noteConfig.no11')" prop="messageType">
            <el-select size="small" v-model="form1.sendChannel" >
              <el-option v-for="item in channelOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <el-form-item :label="$t('noteConfig.no16')" prop="messageType">
          <el-input type="textarea"  v-model="form1.smsContent" :rows="4" maxlength="600"></el-input>
          <p class="f12">{{$t('long.no13')}}</p>
        </el-form-item>
        <div class="flex">
          <el-form-item :label="$t('noteConfig.no15')" prop="messageType">
            <el-select size="small" v-model="form1.messageParam" multiple>
              <el-option v-for="item in parameterOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
            </el-select>
            <p class="f12">{{$t('long.no14')}}</p>
          </el-form-item>
        </div>
        <el-form-item>
          <el-button type="primary" @click="sureSubmit1('ruleForm')">{{$t('operationDetail.no22')}}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- ------------------ 短信营销渠道__添加短信 -------------------- -->
    <el-dialog :title="$t('noteConfig.no22')" :visible.sync="addFlag2" width="1100px">
      <el-form :model="form2" size="small"  ref="ruleForm2" label-width="120px">
        <div class="flex">
          <el-form-item :label="$t('noteConfig.no12')" prop="channelType">
            <el-select size="small" v-model="form2.channelType">
              <el-option v-for="item in channelTypeOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('noteConfig.no11')" prop="sendChannel">
            <el-select size="small" v-model="form2.sendChannel" >
              <el-option v-for="item in channelOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="flex flex-wrap">
          <el-form-item :label="$t('public.no25')" prop="loanTermOptions">
            <el-select size="small" v-model="form2.loanTerm">
              <el-option v-for="item in loanTermOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('noteConfig.no13')" prop="stageType">
            <el-select size="small" v-model="form2.stageType">
              <el-option v-for="item in collectionTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-select size="small" v-model="form2.collectionStage">
              <el-option v-for="item in collectionOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('noteConfig.no17')" prop="sendTarget">
            <el-select size="small" v-model="form2.sendTarget">
              <el-option v-for="item in sendObjOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="flex flex-wrap">
          <el-form-item 
            :label="$t('noteConfig.no14')" prop="messageType" 
            >
            <el-time-picker
              v-for="item in sendTimes"
              :key="item.key"
              v-model="item.value"
              value-format="HH:mm"
              format="HH:mm"
              class="mr10"
              placeholder=" ">
            </el-time-picker>
          </el-form-item>
          <div class="add" size="small" v-if="sendTimes.length<3" @click="addSendTime">+</div>
        </div>
        <el-form-item :label="$t('noteConfig.no16')" prop="messageType">
          <el-input type="textarea"  v-model="form2.smsContent" :rows="4" maxlength="600"></el-input>
        </el-form-item>
        <div class="flex">
          <el-form-item :label="$t('noteConfig.no15')" prop="messageType">
            <el-select size="small" v-model="form2.messageParam" multiple>
              <el-option v-for="item in parameterOptions" :key="item.value" :label="$t(item.label)" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <!-- <div class="add" size="small" v-if="sendTimes.length<3" @click="addSendTime">+</div> -->
        </div>
        <el-form-item>
          <el-button type="primary" @click="sureSubmit2('ruleForm2')">{{$t('operationDetail.no22')}}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- ----------------------确认是否删除开始------------------ -->
    <el-dialog :title="$t('public.no48')" :visible.sync="delFlag" width="550px">
      <div class="left2right">
        <span class="left"></span>
        <span class="right">{{$t('noteConfig.no20')}}？</span>
      </div>
      <div class="left2right mt15">
        <span class="left"></span>
        <span class="right">
          <el-button type="primary" @click="delSure()">{{$t('public.no49')}}</el-button>
        </span>
      </div>
    </el-dialog>

  </div>
</template>
<script>
export default {
  name: 'SentContentListConfig',
  data () {
    return {
      partnerId: '',
      partnerNo: '',
      partnerName: '',
      from: '',
      processNodeSmsConfigList: [{id:1},{id:2}],//短信流程节点配置
      repaySmsConfigList: [],//还款短信配置,
      form1:{
        id: '',
        sendNode: '',
        channelType: '',
        sendChannel: '',
        smsContent: '',
        messageParam: [],
      },
      addFlag1: false,
      changeOrAdd: '',
      form2:{
        channelType: '',
        sendChannel: '',
        loanTerm: '7',
        stageType: '',
        collectionStage: '1',
        sendTarget: [],
        messageParam: [],
      },
      addFlag2: false,
      changeId2: '',
      options1: [],
      pagination: {
        pageSize: global.config.pageSize,
        pageSizeOptions: global.config.pageSizeOptions,
        processcurrent: 1,
        repaycurrent: 1,
        processtotal: 0,
        repaytotal: 0,
      },
      delFlag: false,
      delId: '',
      sendnodeOptions: this.$store.state.options.sendNodes_option,// 发送节点
      channelTypeOptions: this.$store.state.options.channelType_option,// 通道类型
      parameterOptions: this.$store.state.options.parameter_option,// 参数选择
      sendObjOptions: this.$store.state.options.sendObj_option,// 发送对象
      channelOptions: [],// 选中的通道
      channelOptions1: [{value:0,label:this.$t('noteConfig.no21')}],// 验证码通道
      channelOptions2: [{value:0,label:this.$t('noteConfig.no21')}],// 营销通道
      collectionTypeOptions: [{value:1,label:this.$t('add.no12')},{value:2,label:this.$t('new.no12')}],// 2催收,1客服
      loanTermOptions: [],// 借款周期
      collectionOptions: [],// 阶段选择
      customerStageList: [],// 客服阶段
      collectionStageList: [],// 催收阶段
      sendTimes: [{value: ''}],// 发送时间的数组
      params: [{value: ''}],// 参数选择数组
    }
  },
  methods: {
    handleSizeChange (val) {// 每页条数变化时操作
      this.pagination.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange1 (val) { // 分页按钮点击操作
      this.pagination.processcurrent = val;
      this.getTableData();
    },
    handleCurrentChange2 (val) { // 分页按钮点击操作
      this.pagination.repaycurrent = val;
      this.getTableData();
    },
    changeNote(type,row){
      if(type==1){
        this.changeOrAdd = '1'
        this.form1.id = row.id
        this.form1.channelType = row.channelType
        this.form1.sendChannel = row.channelId
        this.form1.smsContent = row.smsContent
        this.form1.sendNode = row.sendNode
        this.form1.messageParam = row.messageParamTextList
        this.addFlag1 = true
      }
      if(type==2){
        this.changeOrAdd = '2'
        this.form2.id = row.id
        // this.form2.sendNode = row.sendNode
        this.form2.loanTerm = row.loanTerm
        this.form2.channelType = row.channelType
        this.form2.sendChannel = row.channelId
        this.form2.stageType = row.stageType
        this.form2.collectionStage = row.collectionStage
        this.form2.smsContent = row.smsContent
        this.form2.sendTarget = row.sendTarget
        this.form2.messageParam = row.messageParamTextList
        if(row.sendTimeList.length){
          let arr = []
          row.sendTimeList.forEach(value=>{
            arr.push({value})
          })
          this.sendTimes = arr
        }
        // this.form2.messageParam = row.sendTimeList
        this.addFlag2 = true
      }
      
    },
    deleteNote(type,id){
      this.updateType = type
      this.delId = id
      this.delFlag = true
    },
    delSure(){
      let options = {
        param: {
          partnerId:this.partnerId,
          id: this.delId,
          updateType: this.updateType,
        }
      }
      this.$axios.post(this.$action.sms_delete, options).then(res => {
        if (res.code == 200) {
          this.$globalMsg.success(this.$t('message.success'))
          this.getTableData()
        }else{
          this.$globalMsg.error(res.message)
        }
        this.delFlag = false;
      })
    },
    showAdd(num){
      this.changeOrAdd = num
      if(num==1){
        this.addFlag1 = true
      }
      if(num==2){
        this.addFlag2 = true
      }
    },
    sureSubmit1(){
      let options = {
        param: {
          partnerId:this.partnerId,
          updateType:1,
          ...this.form1,
        }
      }
      this.$axios.post(this.$action.sms_save, options).then(res => {
        if (res.code == 200) {
          this.$globalMsg.success(this.$t('message.success'))
          this.getTableData()
        }else{
          this.$globalMsg.error(res.message)
        }
        this.changeDialogClose()
      })
    },
    sureSubmit2(){
      let options = {
        param: {
          partnerId:this.partnerId,
          updateType:2,
          ...this.form2,
          sendTime: this.sendTimes.map(item=>item=item.value),
        }
      }
      // options.param.messageParam = this.form1.messageParam.join(',')
      this.$axios.post(this.$action.sms_save, options).then(res => {
        if (res.code == 200) {
          this.$globalMsg.success(this.$t('message.success'))
          this.getTableData()
        }else{
          this.$globalMsg.error(res.message)
        }
        
        this.changeDialogClose()
      })
    },
    changeDialogClose(){
      this.addFlag1 = false;
      this.addFlag2 = false;
      this.form1.id = ''
      this.form1.channelType = ''
      this.form1.sendChannel = ''
      this.form1.smsContent = ''
      this.form1.sendNode = ''
      this.form1.messageParam = []
      this.form2.id = ''
      this.form2.loanTerm = ''
      this.form2.channelType = ''
      this.form2.sendChannel = ''
      this.form2.stageType = ''
      this.form2.collectionStage = ''
      this.form2.smsContent = ''
      this.form2.sendTarget = []
      this.form2.messageParam = []
      this.sendTimes = [{value: ''}]
    },
    getTableData () { // 列表数据获取
      let option = {
        param: {
          partnerId: this.partnerId 
        }  
      }
      this.$axios.post(this.$action.sms_pageinfo, option).then(res => {
        if (res.code == 200) {
          this.partnerName = res.data.partnerName;
          this.partnerNo = res.data.partnerNo;
          this.processNodeSmsConfigList = res.data.processNodeSmsConfigList.list;
          this.pagination.processtotal = res.data.processNodeSmsConfigList.total;
          this.repaySmsConfigList = res.data.repaySmsConfigList.list;
          this.pagination.repaytotal = res.data.repaySmsConfigList.total;
        }else{
          this.$globalMsg.error(res.message)
        }
      })
    },
    getChannelData(type){//获取借款放款渠道下拉框数据
      let option = {
        param:{
          partnerId:this.partnerId,
          channelType: type
        }
      }
      this.$axios.post(this.$action.channel_list, option).then(res => {
        if (res.code == 200) {
          let arr = res.data
          arr.forEach(item=>{
            if(type==1){this.channelOptions1.push({value:item.id,label:item.channelName})}
            if(type==2){this.channelOptions2.push({value:item.id,label:item.channelName})}
          })
				}
      })
    },
    getloanTermData(){// 获取借款周期
      let option = {
        param:{
          partnerId:this.partnerId,
        }
      }
      this.$axios.post(this.$action.sms_period, option).then(res => {
        if (res.code == 200) {
          this.loanTermOptions = res.data
				}
      })
    },
    getStagelData(){// 获取催收客服阶段下拉框数据
      let option = {
        param:{
          partnerId:this.partnerId,
        }
      }
      this.$axios.post(this.$action.selection_stage, option).then(res => {
        if (res.code == 200) {
          let arr = res.data.customerStageList
          let brr = res.data.collectionStageList
          arr.forEach(item => {
            item.value = item.id
            item.label = item.stage
          })
          brr.forEach(item => {
            item.value = item.id
            item.label = item.stage
          })
          this.customerStageList = arr
          this.collectionStageList = brr
				}
      })
    },
    addSendTime() {
      this.sendTimes.push({
        value: '',
        key: Date.now()
      });
    }
  },
  watch:{
    'form1.channelType'(val){
      // this.form1.sendChannel = ''
      if(val==1){
        this.channelOptions = this.channelOptions1
      }
      if(val==2){
        this.channelOptions = this.channelOptions2
      }
    },
    'form2.channelType'(val){
      // this.form2.sendChannel = ''
      if(val==1){
        this.channelOptions = this.channelOptions1
      }
      if(val==2){
        this.channelOptions = this.channelOptions2
      }
    },
    'form2.stageType'(val){
      if(val==1){
        this.collectionOptions = this.customerStageList
      }
      if(val==2){
        this.collectionOptions = this.collectionStageList
      }
    },
    addFlag1(val){
      if(!val){
        this.changeDialogClose()
      }
    },
    addFlag2(val){
      if(!val){
        this.changeDialogClose()
      }
    },
  },
  mounted () {
    
    this.partnerId = this.$route.query.id
    this.from = this.$route.query.from
    this.getTableData()
    this.getChannelData(1)
    this.getChannelData(2)
    this.getStagelData()
    this.getloanTermData()
  }
}
</script>
<style scoped lang="scss">
.add{
  width:50px;
  height:35px;
  text-align: center;
  line-height: 35px;
  font-size: 20px;
  background-color: #409eff;
  color: #ffffff;
  margin-left: 10px;
      border-radius: 3px;
}
</style>
